<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>欢迎来到拴马桩</title>
  <link rel="stylesheet" type="text/css" href="login/style.css">
  <link rel="shortcut icon" href="Imperial/assets/img/logo.php">
  <link rel="stylesheet" th:href="@{/webjars/layui/2.5.7/css/layui.css}">
  <script th:src="@{/webjars/layui/2.5.7/layui.js}"></script>
  <script th:src="@{/webjars/jquery/3.6.0/dist/jquery.js}"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
<div class="container right-panel-active">

  <!-- 登录 -->
<!--  <div class="container__form container&#45;&#45;signin">-->
<!--    <form action="/toregister" class="form" id="form1" method="post">-->
<!--      <h2 class="form__title">注册账号</h2>-->
<!--      <input type="text" placeholder="用户名" name="username" class="input" />-->
<!--      <input type="email" placeholder="邮箱" name="email" class="input" />-->
<!--      <input type="text" placeholder="手机号" name="phone_number" class="input" />-->
<!--      <input type="password" placeholder="密码" name="password" class="input" />-->
<!--      <button class="btn">点击注册</button>-->
<!--    </form>-->
<!--  </div>-->
  <!-- 注册 -->
  <div  class="container__form container--signup">
    <form action="/homePage" class="form" id="form2" method="post">
      <h2 class="form__title">欢迎登录</h2>
      <h4 th:text="${msg1}" style="color: #00FF00"></h4>
      <h4 th:text="${msg}" style="color: red"></h4>
      <input type="text" placeholder="邮箱" class="input" name="email" />
      <input type="password" placeholder="密码" class="input" name="password" />
      <div id="layerDemo" style="margin-bottom: 0;">
        <div class="layui-btn-container" style="margin-top: 30px;">
          <button data-method="notice" type="button" class="layui-btn layui-btn-primary layui-border">忘记密码</button>
        </div>
      </div>
      <button class="btn">登录</button>
    </form>
  </div>
  <!-- 叠加部分 -->
  <div class="container__overlay">
    <div class="overlay">
      <div class="overlay__panel overlay--left">
        <a class="btn" th:href="@{/register}" style="text-decoration: none">没有账号，点击注册</a>
      </div>
      <div class="overlay__panel overlay--right">
        <a class="btn" th:href="@{/tologin}" style="text-decoration: none">已有账号，直接登录</a>
      </div>
    </div>
  </div>
</div>
</body>
<script src="login/script.js"></script>
</html>
<script>
  layui.use('layer', function(){ //独立版的layer无需执行这一句
    var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

    //触发事件
    var active = {
      notice: function(){
        //示范一个公告层
        layer.open({
          type: 1
          ,title: false //不显示标题栏
          ,closeBtn: false
          ,area: '550px;'
          ,shade: 0.8
          ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
          // ,btn: ['确定', '取消']
          ,btnAlign: 'c'
          ,moveType: 1 //拖拽模式，0或者1
          ,content: '<div>'+'<span class="layui-layer-setwin" ><a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a></span>' +
                  '<form style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;" id="app">' +
                  '<div class="layui-inline">' +
                  '<label id="eamil" class="layui-form-label">请输入邮箱</label>' +
                  '<div class="layui-input-inline">' +
                  '<input type="text" id="new" lay-verify="email" autocomplete="off" class="layui-input">' +
                  '</div>' +
                  '<button type="button" class="layui-btn" onclick="sendVerificationCode()">获取验证码</button>' +
                  '<div class="layui-inline">' +
                  '<br><label class="layui-form-label">输入验证码</label>' +
                  '<div class="layui-input-inline">' +
                  '<input type="text" id="old" autocomplete="off" class="layui-input">' +
                  '</div></div>' +
                  '<br><br>' +
                  '<button type="button" onclick="submitVerificationCode()" class="layui-btn" style="position: absolute;left: 190px">提交</button></form>'+
          '<div>'
          ,success: function(layero){

          }
        });
      }
    };

    $('#layerDemo .layui-btn').on('click', function(){
      var othis = $(this), method = othis.data('method');
      active[method] ? active[method].call(this, othis) : '';
    });


    //多窗口模式 - esc 键
    $(document).on('keyup', function(e){
      if(e.keyCode === 27){
        layer.close(layer.escIndex ? layer.escIndex[0] : 0);
      }
    });
  });

  function sendVerificationCode () {
    if ($('#new').val() == null || $('#new').val() == "") {
      layui.use('layer', function () {
        layer.msg("邮箱不能为空");
      })
      return;
    }
    $.ajax({
      url: '/sendVerificationCode',
      data: {
        "Email": $('#new').val()
      },
      success: function (res) {
        layui.use('layer', function () {
          if (res == "1") {
            layer.msg("发送成功");
          }
          if (res=="0"){
            layer.msg("发送失败");
          }
          if (res=="-1"){
            layer.msg("邮箱错误");
          }
        })
      }
    })
  }
  function submitVerificationCode() {
    let VerificationCode=$("#old").val();
    $.ajax({
      url:'/submitVerificationCode',
      data:{
        "VerificationCode":VerificationCode,
        "email" : $("#new").val()
      },
      success:function (res) {
        layui.use('layer',function () {
          if(res=='-1'){
            layer.msg("验证码已失效");
          }
          if (res=="0"){
            layer.msg("验证码错误");
          }
          if (res=="1"){
            layer.msg("提交成功！临时密码以发入您的邮箱");
          }
        })
      }
    })
  }
</script>